/*
 * @Author: xiaosihan 
 * @Date: 2023-08-06 18:52:05 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-04-17 19:24:08
 */

import designTemplateEditorer from "../../designTemplateEditorer";
import InfiniteScroll from "@/components/InfiniteScroll";
import { StickerData } from "#/type";
import utils from "@/utils/utils";
import type { TabsProps } from 'antd';
import { Cascader, Tabs } from "antd";
import { autorun, toJS } from "mobx";
import { useEffect, useRef, useState } from "react";
import { LazyLoadImage } from 'react-lazy-load-image-component';
import styles from "./sticker.module.less";
import stickerStore from "./stickerStore";

interface Iprops {
  onClick?: (url: string, name: string) => void;
}

// 图库
export default function Sticker(props: Iprops) {

  const [groupData, setGroupDate] = useState<Array<{ label: string, value: string }>>([]);
  const [activeGroup, setActiveGroup] = useState("");
  const [stickerList, setStickerList] = useState<Array<StickerData>>([]);
  const currentPage = useRef(0);
  const searchValue = useRef("");
  const [active, setActive] = useState('0');

  const [cascaderOptions, setCascaderOptions] = useState(toJS(stickerStore.cascaderOptions));
  const [stickers, setStickers] = useState(toJS(stickerStore.stickers));

  const [activeid, setActiveid] = useState(toJS(stickerStore.activeid));
  const [hasNext, setHasNext] = useState(toJS(stickerStore.hasNext));
  const [loading, setLoading] = useState(stickerStore.loading);


  useEffect(() => autorun(() => {
    setCascaderOptions(toJS(stickerStore.cascaderOptions));
    setStickers(toJS(stickerStore.stickers));
    setActiveid(toJS(stickerStore.activeid));
    setHasNext(stickerStore.hasNext);
    setLoading(stickerStore.loading);
  }), []);

  const collectionList = async (reset: boolean = false) => {
    setLoading(true);
    try {
      // currentPage.current += 1;
      // const dts = await loginService.collectionList({
      //     currentPage: currentPage.current,
      //     pageSize: 10,
      //     type: 'sticker',
      // });
      // const dt = (dts as unknown as { list: Array<StickerData> }).list;
      // if (reset) {
      //     setStickerList(dt);
      // } else {
      //     setStickerList([...stickerList, ...dt]);
      // }
      // setHasNext((dts as any).hasNext);
    } finally {
      setLoading(false);
    };
  }

  const items: TabsProps['items'] = [
    {
      key: '0',
      label: '图库列表',
      children: '',
    },
    {
      key: '1',
      label: '收藏图库',
      children: '',
    },
  ];

  const onChange = (val: string) => {
    setActive(val);
    currentPage.current = 0;
    setStickerList([]);
    setHasNext(true);
    if (val === '0') {

    } else {
      collectionList(true);
    }
  }

  return (
    <div className={styles.sticker} >
      <Tabs activeKey={active} items={items} onChange={onChange} className={styles.btn} />
      {
        active === '0' ? <div className={styles.stickerGroup} >
          <span className={styles.label} >分组</span>
          <Cascader
            options={cascaderOptions}
            value={activeid}
            style={{ width: 'calc(100% - 40px)' }}
            onChange={(activeid: any) => {
              stickerStore.setActiveid(activeid as [number, number]);
            }}
          />
        </div> : ''
      }
      <InfiniteScroll
        className={styles.infiniteScroll}
        hasNext={hasNext}
        loading={loading}
        height='calc(100% - 68px)'
        request={active === '0' ? () => stickerStore.getNextPage() : collectionList}
        list={(active === "0" ? stickers : stickerList)}
      >
        {
          (active === "0" ? stickers : stickerList).map(s => {
            return (
              <div
                key={s.id} className={styles.sticker_item}
              >
                {/* <OnlineIcon disable={s.disable} /> */}
                {/* <CollectionIcon clsProps={styles.colectionHover} id={s?.id} type='collect_sticker_ids' /> */}
                <LazyLoadImage
                  alt=""
                  onClick={() => {
                    if (props.onClick) {
                      props.onClick(s.name, s.url);
                    } else {
                      designTemplateEditorer.addImg(s.name, utils.ossSuffix(s.url, 1000));
                    }
                  }}
                  className={styles.img}
                  src={utils.ossSuffix(s.url, 120)}
                />
              </div>
            )
          })
        }
      </InfiniteScroll>

    </div>
  );

}